Implement Protected Routes and Authentication Middleware

It ensures that only authenticated users can access sensitive routes by implementing:

• Next.js middleware for server-side route guarding
• A protected route wrapper component for client-side checks
• Automatic redirects to /login for unauthorized users
• Loading states during authentication verification

This improves security and prevents unauthorized access to protected areas of the application.

Related Issues

Closes #12

Changes Made

• Created middleware.ts at project root

• Implemented JWT validation inside middleware

• Configured redirect to /login when token is missing or invalid

• Created ProtectedRoute wrapper component

• Integrated useAuth() hook for client-side auth checks

• Added loading state during authentication verification

• Applied protection to the following routes:

  • /dashboard
  • /profile
  • /listings/create
  • /messages

How to Test

1. Ensure user is logged out.

2. Attempt to access:

   • /dashboard
   • /profile
   • /listings/create
   • /messages
     ✅ Should redirect to /login.

3. Log in with a valid account.

4. Navigate to the protected routes.
   ✅ Pages should render successfully.

5. Manually remove or invalidate the JWT token (e.g., delete from storage).

   • Refresh protected route.
     ✅ Should redirect to /login.

6. Observe loading state during auth verification before page renders.